<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
		<script src="./vue.global.js"></script>
		<link rel="stylesheet" href="./index.css" />
		<link rel="stylesheet" href="./table.css" />
		<link rel="stylesheet" href="./pugong.css" />
		<link rel="stylesheet" href="./utils.css" />
		<script src="./index.full.js"></script>

		<script>
			//适配代码
			(function(doc, win) {
				var docEI = doc.documentElement,
					resizeEvt =
					"orientationchange" in window ? "orientataionchange" : "resize",
					recalc = function() {
						var clientWidth = docEI.clientWidth;
						if (!clientWidth) return;
						//100是字体大小，1536是开发时浏览器窗口的宽度，等比计算
						docEI.style.fontSize = 100 * (clientWidth / 1536) + "px";
					};

				if (!doc.addEventListener) return;
				win.addEventListener(resizeEvt, recalc, false);
				doc.addEventListener("DOMContentLoaded", recalc, false);
			})(document, window);
		</script>
		<style>
			* {
				/* margin: 0;
        padding: 0; */
				font-size: 0.15rem;
			}
		</style>
	</head>

	<body>
		<div id="app" class="table-content">
			<h3 style="font-size: 0.25rem">正确使用安全防护用品承诺书</h3>

			<div class="table-form">
				<el-form ref="dataForm" :model="useForm" label-width="138px" class="dataForm">
					<el-row>
						<el-row style="width: 100%">
							<el-col :span="24">
								<el-row>
									<el-col :span="12">
										<el-form-item label="工程名称" prop="memberId" class="formItemDuty" style="border-top: 0px">
											<el-input v-model="useForm.projectName" class="formItemDutyIn" />
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="施工单位" prop="" class="formItemDuty" style="border-top: 0px">
											<el-input v-model="useForm.projectUnit" class="formItemDutyIn" />
										</el-form-item>
									</el-col>
								</el-row>
								<el-row class="border-bottom">
									<el-col :span="12">
										<el-form-item label="姓名" prop="" class="formItemDuty">
											<el-input v-model="useForm.name" class="formItemDutyIn" />
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="工种" prop="" class="formItemDuty">
											<el-input v-model="useForm.workType" class="formItemDutyIn" />
										</el-form-item>
									</el-col>
								</el-row>

								<el-row>
									<el-col :span="6" class="border-right center-label">安全防护用品领用</el-col>
									<el-col :span="18">
										<el-row>
											<el-checkbox-group :inline="false" v-model="useForm.receive">
												<div>
													<el-checkbox label="安全帽" value="1" />安全帽
													<el-checkbox label="工作服" value="2" />工作服
													<el-checkbox label="劳保鞋" value="3" />劳保鞋
													<el-checkbox label="防尘/毒口罩" value="4" />防尘/毒口罩
													<el-checkbox label="电焊面罩" value="5" />电焊面罩
													<br />
												</div>
												<div>
													<el-checkbox label="防护/绝缘手套" value="6" />防护/绝缘手套
													<el-checkbox label="安全带" value="7" />安全带
													<el-checkbox label="隔音耳塞" value="8" />隔音耳塞
													<el-checkbox label="护目镜" value="9" />护目镜
													<el-checkbox label="其他" value="10" />其他
												</div>
											</el-checkbox-group>
										</el-row>
										<el-row>
											<el-col :span="12" >
												<el-form-item label="领用人" prop="" class="formItemDuty" style="display: flex;align-items: center;"  @click="setUpEquipment('useForm.person','TaskSign')">
													<!-- <el-input v-model="useForm.person" class="formItemDutyIn" /> -->

													<div class="formItemDutyIn" style="width: 100%;height: 0.36rem;">
														<el-input class="formItemDutyIn" v-show="!useForm.person" style="height: 0.36rem;"></el-input>
														<el-image class="sign_img2" v-show="useForm.person" :src="useForm.person" fit="fill"></el-image>
													</div>
												</el-form-item>
											</el-col>
											<el-col :span="12">
												<el-form-item label="领用日期" prop="" class="formItemDuty" style="display: flex;align-items: center;" >
													<el-input v-model="useForm.date" class="formItemDutyIn" style="height: 0.36rem;"/>
												</el-form-item>
											</el-col>
										</el-row>
									</el-col>
								</el-row>
								<el-row class="border-top">
									<el-col :span="10" class="center-label border-right">防护用品正确使用掌握情况确认</el-col>
									<el-col :span="14" class="text-left pl-2">
										<el-radio-group v-model="useForm.canUse" @change="onInput($event,'canUse')">
											<el-radio :value="1">会</el-radio>
											<el-radio :value="2">不会</el-radio>
										</el-radio-group>
									</el-col>
								</el-row>

								<el-row class="p-2 border-top text-left">
									<div>对应防护用品正确使用方法：</div>
									<div class="text-indent">
										1、戴安全帽前应将帽后调整带按自己头型调整到适合的位置，然后将帽内弹性带系牢。缓冲衬垫的松紧由带子调节，人的头顶和帽体内顶部的空间垂直距离一般在25～50mm之间，至少不要小于32mm为好。这样才能保证当遭受冲击时，帽体有足够的空间可供缓冲，平时也有利于头和帽体间的通风。安全帽的下领带必须扣在颌下，并系牢，松紧要适度。
									</div>
									<div class="text-indent">
										2、安全带应该高挂低用，注意防止摆动碰撞；长度限制在1.5～2.0m，使用3m以上长绳应加缓冲器。不准将绳打结使用，也不准将钩直接挂在安全绳上使用，应挂在连接环上使用。安全带上的各种部件不得任意拆掉，使用2年以上应抽检一次。
									</div>
								</el-row>
								<el-row class="p-2 border-top text-left">
									<div style="width: 100%">本人承诺：</div>
									<div class="text-indent">
										1、了解作业现场施工特点、本班组作业特点，可能存在的不安全因素及必须遵守的事项；
									</div>
									<div class="text-indent">
										2、了解本工种的安全操作规程、本单位的安全生产制度、规定；
									</div>
									<div class="text-indent">
										3、了解防火、防毒、防尘、防爆知识及紧急情况安全处置和安全疏散知识；
									</div>
									<div class="text-indent">
										4、了解本岗位易发生事故的不安全因素及其防范对策；
									</div>
									<div class="text-indent">
										5、遵守劳动纪律，服从项目部管理，已学习劳动防护用品正确使用方法，并在施工作业过程中正确使用安全防护装置（设施）及个人劳动防护用品；
									</div>
									<div class="text-indent">
										6、按操作规程作业，施工中做到“不伤害自己，不伤害他人，不被别人伤害，保护他人不被伤害”；
									</div>
									<div class="text-indent">
										7、发现事故隐患或发生事故，应及时报告领导或有关工作人员；
									</div>
									<div class="text-indent">8、主动制止他人违章行为；</div>
									<div class="text-indent">9、其它事项（项目部补充完善）。</div>
								</el-row>
							</el-col>
						</el-row>
					</el-row>
				</el-form>

				<div class="d-flex flex-row mt-2 justify-content-between">
					<div class="text-left">
						<div @click="setUpEquipment('useForm.acceptor','TaskSignFinger')">承诺人：</div>
						<el-image class="sign_img" v-show="useForm.acceptor" :src="useForm.acceptor" fit="fill"></el-image>

					</div>
					<div>
						<el-input v-model="useForm.year" class="people-input" placeholder=" " style="width: 0.8rem"></el-input>
						年
						<el-input v-model="useForm.month" class="people-input" placeholder=" " style="width: 0.5rem"></el-input>
						月
						<el-input v-model="useForm.day" class="people-input" placeholder=" " style="width: 0.5rem"></el-input>
						日
					</div>
				</div>
			</div>
		</div>
		<script>
			const {
				createApp,
				reactive,
				toRefs,
				ref,
				onMounted
			} = Vue;
			const vue3Composition = {
				setup() {
					const useForm = ref({
						projectName: "引江补汉工程土建施工及金结机电安装8标",
						projectUnit: "中国水利水电第十四工程局有限公司",
						name:'',
						workType:'',
						receive: "", //安全用品领用
						person: "", //领用人
						date: "", //领用日期
						canUse: "", //防护用品正确使用掌握情况确认
						year: "",
						month: "",
						day: "",
						acceptor: "",//承诺人
					});

					window.setSign = (event) => {
						useForm.value[event.key] = event.img;
					};

					window.getData = (event) => {
						return useForm.value;
					};
					window.setData = (data) => {
						useForm.value = data;
						// useForm.value.person = data.name;
					};
					const onInput = (e, key) => {
						window.parent.postMessage({
							key,
							isFill: e != '',
							form:'useForm'
						}, '*')
					}
					//peopleForm.sign
					const setUpEquipment = (key, type) => {
						window.parent.childListener({
							key,
							type,
						});
					};
					return {
						useForm,
						setUpEquipment,
						onInput
					};
				},
			};
			const app = createApp(vue3Composition)
				.use(ElementPlus)
				.mount("#app");
		</script>
	</body>
</html>